<template>
 <div class="meCollent">
   <div class="food-list">
     <div class="list-left">
       <div class="box-item" v-for="(item,index) in imagesList" :key='index'>
         <img :src="item" alt="">
       </div>
     </div>
     <!-- <div class="list-right">
       <div class="box-item" v-for="(item,index) in imgB" :key='index'>
         <img :src="item" alt="">
       </div>
     </div> -->
   </div>
 </div>
</template>
<script>
import {mapActions,mapState} from 'vuex'
export default {
  data () {
    return {
      images: [
        {src: '../../images/f1.png'},
        {src: '../../images/f2.png'},
        {src: '../../images/f3.png'},
        {src: '../../images/f4.png'},
        {src: '../../images/f5.png'},
        {src: '../../images/f6.png'},
        {src: '../../images/f7.png'},
        {src: '../../images/f8.png'},
        {src: '../../images/f9.png'},
        {src: '../../images/f10.png'},
      ],
      imgA: [],
      imgB: []
    }
  },
  methods: {
    ...mapActions([
      'getMyToken',
      'getGoods'
    ]),
  },
  components: {
  },
  computed: {
    ...mapState(['goodsList','imagesList']),
  },
  mounted () {
    this.getGoods().then(() => {
      // this.imgA = this.imagesList.splice(0,5)
      // this.imgB = this.imagesList.splice(5,10)
    })
  }
}
</script>
<style lang="scss" scoped>
.meCollent{
  position: relative;
  text-align: center;
  margin: 0 auto;
  .food-list{
    display: flex;
    .list-left,
    .list-right{
      flex: 1;
      .box-item{
        width: 50%;
        float: left;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
